<template>
  <div class="page">
    <div class="page-title">
      <div class="page-title-left">
        <span>抵充处罚积分</span>
        <!-- <span>{{title}}</span> -->
        <span>({{totalintegral}})</span>
      </div>
      <div class="page-title-right">
        <!-- <div class="export-btn" @click="exportData">
          <img src="../../../assets/img/export.png" alt="">
          <span>导出</span>
        </div> -->
        <export-btn :form="form" :url="url"></export-btn>
      </div>
    </div>
    <div class="page-main">
      <el-form ref="form" :model="form" label-width="85px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="姓名">
              <el-input v-model="form.nickname" placeholder="请输入" style="width: 200px;" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="抵充时间段">
              <el-date-picker v-model="form.startdate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 140px;">
              </el-date-picker>
              ~
              <el-date-picker v-model="form.enddate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 140px;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="text-align: right;">
            <el-button type="primary" style="width: 120px;" @click="query">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div v-loading="loading">
        <el-table :data="tableData" border stripe style="margin-bottom: 22px;" size="small">
          <el-table-column  prop="nickname" label="会员名称" align="center">
          </el-table-column>
          <el-table-column  prop="recordnum" label="抵扣积分" align="center">
          </el-table-column>
          <el-table-column  prop="insertdate" label="抵充时间" align="center">
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pagenum" :page-sizes="[10, 20, 30, 50, 100]" :page-size="form.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="600px">
      <div class="dialog-title">
        <div class="dialog-title-left">
          <span>查看</span>
        </div>
      </div>
      <div class="dialog-main">
        <el-row>
          <el-col :span="12">
            <span>会员名称：</span>
            <span>{{detail.nickname}}</span>
          </el-col>
          <el-col :span="12">
            <span>抵充积分：</span>
            <span>{{detail.recordnum}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <span>抵充时间：</span>
            <span>{{detail.insertdate}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16" style="display: flex;">
            <span style="min-width: 80px;">抵充原因：</span>
            <span>{{detail.note}}</span>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js">
</script>

<style scoped src="./index.css">
</style>
